<script setup  lang="ts">
import { computed, ref } from 'vue';
interface PropsType {
  list: {
    id: number;
    name: string;
    done: boolean;
  }[]
}

const Props = defineProps<PropsType>()

const emit = defineEmits(['checkall','handleChecked','handleDelItem'])


/** 计算属性 小选影响全选 */
const checkAll = computed(() => {
  return Props.list.length > 0 && Props.list.every(item => item.done)
})

</script>

<template>
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      @click="emit('checkall', !checkAll)"
      :checked="checkAll"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li :class="item.done ? 'completed' : ''" v-for="(item, index) in list" :key="item.id">
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @click="emit('handleChecked',item.id)"
          />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="emit('handleDelItem',index)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
      <!-- <li>
        <div class="view">
          <input class="toggle" type="checkbox" />
          <label>Buy a unicorn</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web" />
      </li>-->
    </ul>
  </section>
</template>

<style lang="less" scoped></style>
